<template>
	<view class="nl-shadow-box nl-box-padding">
		<!-- <search></search> -->
			<!-- <u-search @input="onInput" :show-action="true" action-text="搜索" :animation="true"></u-search> -->
			<!-- 搜索 -->
			<view class="nl-search-box">
				<view class="search">
					<u-icon class="icon" name="search" color="#D1D1D1" size="40"></u-icon>
					<u-input v-model="inputdata" class="input" type="text" placeholder="输入房屋号" />
					<view class="button" @click="searchHouse()">搜索</view>
				</view>
			</view>
			<!-- 内容 -->
			<view v-if="hasNet">
				<view class="list-box" v-if="hasInfo">
					<view class="nl-flex-list active" v-for="item in data"
					@click="houseback(item.roomNum,item.roomId)">
							<view class="icon"></view>
							<text>{{item.roomNum}}室</text>
					</view>
				</view>
				<view v-else>
					<noData noDataText="暂无数据"></noData>
				</view>
			</view>
			<view v-else>
				<netError v-if="!hasNet" @refresh="refresh()"></netError>
			</view>
	</view>
</template>

<script>
	import {getRoomInfomartion} from "@/api/room.js"
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				data:[],
				//输入到搜索框的数据
				inputdata:"",
				unitid:'',
				floorid:'',
				hasNet:true, //是否有网络
				hasInfo:true,//判断是否有数据
				//发送请求参数
				param:{
					communityId:'',//小区编号 
					floorId:'',//楼段编号
					unitId:'',
					name:"",
					page:'',
					row:''
				}
				
			}
		},
		onLoad(option) {
			this.unitid=option.unitId || ""
			this.floorid=option.floorId || ""
			uni.showLoading({
				title:'加载中'
			})
			this.getRoomInfomartion({
					communityId:this.userCommunity.communityId,//小区编号 
					floorId:this.floorid,//楼段编号
					unitId:this.unitid,
					name:"",
					page:1,
					row:10
				});
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		methods: {
			getRoomInfomartion(dat){
				var that=this
				getRoomInfomartion(dat).then((res)=>{
					that.hasNet=true
					if(res.hasOwnProperty('rooms')){
						//有这个属性，但这个属性数据长度为0，也就数还是没有数据
						if(res.rooms.length===0){
							that.hasInfo=false
						}else{
							//有数据 有网络
							that.data=res.rooms
							that.hasInfo=true
						}
					}else{
						//没有这个属性 就是没有数据
						that.hasInfo=false
					}
					uni.hideLoading();
					uni.stopPullDownRefresh()
				}).catch((err)=>{
					that.hasNet=false
					uni.hideLoading();
					uni.stopPullDownRefresh()
				})
			},
			/**
			 * 点击搜索按钮
			 */
			searchHouse(){
				uni.showLoading({
					title:'加载中'
				})
				getRoomInfomartion({
					communityId:this.userCommunity.communityId,//小区编号 
					floorId:this.floorid,//楼段编号
					unitId:this.unitid,
					name:this.inputdata,
					page:1,
					row:10
				})
			},
			//无网络点击刷新
			refresh(){
				uni.showLoading({
					title:'加载中'
				})
				this.getRoomInfomartion({
					communityId:this.userCommunity.communityId,//小区编号 
					floorId:this.floorid,//楼段编号
					unitId:this.unitid,
					name:"",
					page:1,
					row:10
				})
			},
			houseback(roomNum,roomId){
				let pages = getCurrentPages();
				let nowPage = pages[pages.length - 1]
				let prePage = pages[pages.length - 2]
				prePage.$vm.data.house = roomNum
				prePage.$vm.data.roomid = roomId
				uni.navigateBack({
					delta: 1
				})
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			uni.showLoading({
				title:'加载中'
			})
			this.getRoomInfomartion({
					communityId:this.userCommunity.communityId,//小区编号 
					floorId:this.floorid,//楼段编号
					unitId:this.unitid,
					name:"",
					page:1,
					row:10
				})
				this.inputdata=''
		}
	}
</script>

<style lang="scss">
	.nl-shadow-box{
		margin-bottom: 40rpx;
		padding-bottom: 20rpx;
	}
	.wrap {
		padding: 24rpx;
	}	
	
	.item {
		padding: 24rpx 0;
		color: $u-content-color;
		font-size: 28rpx;
	}
	
	.nl-search-box {
		padding: 20rpx 0;
		border-bottom: 2rpx solid $uni-bg-color-grey;
	
		.search {
			height: 72rpx;
			display: flex;
			align-items: center;
			position: relative;
			border-radius: 8rpx;
			overflow: hidden;
			background-color: #F3F3F3;
		}
	
		.icon {
			margin: 0 16rpx 0 24rpx;
		}
		
		.input {
			flex: 1;
			font-size: $uni-font-size-base;
			margin-right: 15rpx;
		}
	
		.button {
			width: 140rpx;
			line-height: 72rpx;
			margin-left: auto;
			text-align: center;
			color: #FFFFFF;
			user-select: none;
			font-size: $uni-font-size-base;
			background-color: $nl-color-main;
		}
	
		.button:active {
			background-color: #0f70d6;
		}
	}
	
	.list-box {
		width: 100%;
		// padding-bottom: 20rpx;
		.nl-flex-list{
			.icon {
				width: 28rpx;
				height: 28rpx;
				background-image: url(../../../static/roomquery/fw.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				margin-right: 16rpx;
			}
		}
		
		.name{
			flex: 1;
			margin-right: 16rpx;
		}
		
		.right-grey{
			font-size: $uni-font-size-sm;
			text-align: right;
		}
	}
</style>
